<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 模板语法  -->
        <!-- 可以直接获取绑定的vue里面data的数据 -->
        <h2>{{ msg }}</h2>
        <!-- 可以直接展示字符串, 也可以调用函数分割字符串之类的 -->
        <h3>{{ 'hahahahaha' }}</h3>
        <h3>{{ msg.split('').reverse().join('') }}</h3>
        <!-- 可以计算 -->
        <h3>{{ 1+1 }}</h3>
        <!-- 可以是对象 -->
        <h4>{{ {'name': 'hello'} }}</h4>
        <!-- 可以取绑定Vue中的对象的属性 -->
        <h5>{{ person }}</h5>
        <h5>{{ person.name }}</h5>
        <!-- 做三元运算 -->
        <h2>{{ 1>2 ? '真的':'假的' }}</h2>
    </div>
    <!--1. 引包 -->
    <script src='./vue.js'></script>
    <script>
        //  2.实例化对象
        new Vue({ 
            el: '#app',  // 绑定元素, 可以在标签中直接获取data中的数据
            data: {
                // 数据属性
                msg: 'hello Vue',
                person: {
                    name: '李四'
                }
            }
        });
    </script>
</body>

</html>